import Taro, { Component } from '@tarojs/taro';
import { View, Image } from '@tarojs/components';
import './index.scss';
import Home from '../../static/home/home.png';
import Homec from '../../static/home/homec.png';
import Shop from '../../static/home/shop.png';
import Shopc from '../../static/home/shopc.png';
import Saoc from '../../static/home/saoc.png';
import Dingzhi from '../../static/home/dongzhi.png';
import Dingzhic from '../../static/home/dingzhic.png';
import ElectronicCard from '../../static/home/electronicCard.png';
import ElectronicCardC from '../../static/home/electronicCardC.png';
import ElectronicCardDot from '../../static/home/electronicCardDot.png';
import ElectronicCardDotC from '../../static/home/electronicCardDotC.png';
import User from '../../static/home/user.png';
import Userc from '../../static/home/userc.png';
import UserDotC from '../../static/home/UserDotC.png';
import UserDot from '../../static/home/UserDot.png';
import { getCardInfo, } from '../../services/user';
import { addCard } from '../../services/card';
import { getUserCardCount } from '../../services/electronicCard';

export default class Index extends Component {
  state = {
    userInfo: Taro.getStorageSync('userInfo') || null,
    list: [],
    isShowWebView: false,
    webViewUrl: '',
    navigationBarHeight: Taro.getStorageSync('navigationBarHeight'),
    navigationtBarHeight: '',
    isShowModal: false,
    contentArr: null,
    cardInfo: null,
    modalTitle: '',
    comfirmText: '',
    cancleText: '',
    rich: '',
    status: 1,
    cardCount: Taro.getStorageSync('card_count')
  };
  componentDidShow() {
    const system = Taro.getSystemInfoSync();
    if (system.model === 'iPhone XS Max' || system.model === 'iPhone X' || system.model === 'iPhone XS' || system.model === 'iPhone XR' || system.model === 'iPhone 11' || system.model === 'iPhone 12') {
      this.setState({
        navigationtBarHeight: 'tabbar'
      })
    } else {
      this.setState({
        navigationtBarHeight: 'tab-bar'
      })
    }
    getUserCardCount().then((res) => {
      // 设置电子卡券数量，以判断是否展示 红点
      this.setState({
        cardCount: res.total,
      })
      Taro.setStorageSync('card_count', res.total);
      Taro.setStorageSync('will_expire_card_count', res.will_expire);
    });
  }
  clickHome = () => {
    // Taro.switchTab({
    Taro.redirectTo({
      url: '/pages/home/index',
    });
  };
  clickShop = () => {
    Taro.redirectTo({
      url: '/pages/vip-list/index',
    });
  };
  scan = () => {
    var userInfo = Taro.getStorageSync('userInfo')
    if (!userInfo) {
      Taro.navigateTo({
        url: '/subPackageWork/pages/login/index',
      });
    } else {
      let self = this;
      Taro.scanCode({
        onlyFromCamera: true,
        success(res) {
          if (res.result.slice(0, 2) === '00') {
            Taro.setStorageSync('card_no', res.result);
            Taro.navigateTo({
              url: `/subPackageWork/pages/exchange/index?type=coupon`,
            });
          } else {
            getCardInfo({
              card_no: res.result.trim(),
            }).then(data => {
              if (data.status === 6) {
                Taro.setStorageSync('card_no', data.card_no);
                if (data.user) {
                  Taro.setStorageSync('barcode_address', data.user.level_customize_pic);
                } Taro.setStorageSync('attr_name', data.attr_name);
                Taro.navigateTo({
                  url: `/subPackageWork/pages/exchange/index`,
                });
              } else if (data.status === 4) {
                addCard({
                  card_no: data.card_no,
                }).then(
                  res => {
                    Taro.showToast({
                      title: '添加成功',
                      icon: 'none',
                    });
                    // 二级代理从一级代理领卡
                    let contentArr = [
                      {
                        key: '卡号',
                        value: data.card_no,
                      },
                      {
                        key: '类型',
                        value: data.attr_name,
                      },
                    ];
                    self.setState({
                      contentArr: contentArr,
                      isShowModal: true,
                      cardInfo: data,
                      modalTitle: '已加入我的兑换卡',
                      comfirmText: '继续添加',
                      cancleText: '关闭',
                    });
                  },
                  () => {
                    this.setState({
                      isShowModal: false,
                    });
                  }
                );
              } else if (data.status === 5) {
                let contentArr = [
                  {
                    key: '卡号',
                    value: data.card_no,
                  },
                  {
                    key: '类型',
                    value: data.attr_name,
                  },
                ];
                self.setState({
                  contentArr: contentArr,
                  isShowModal: true,
                  cardInfo: data,
                  modalTitle: '兑换卡',
                  comfirmText: '去付款',
                  cancleText: '取消',
                });
              }
            });
          }
        },
        fail(err) {
          console.log(err)
        }
      });
    }
  };
  clickDingzhic = () => {
    Taro.redirectTo({
      url: '/subPackageWork/pages/customized/index?id=1&showBtn=1',
    });
  };
  clickElectronicCard = () => {
    Taro.redirectTo({
      url: '/subPackageWork/pages/electronic-card/index',
    });
  };
  clickElectronicLp = () => {
    Taro.redirectTo({
      url: '/subPackageWork/pages/electronic-lp/index?id=1&showBtn=1',
    });
  };
  clickUserc = () => {
    Taro.redirectTo({
      url: '/pages/user/index',
    });
  };
  render() {
    let { statusS } = this.props
    return (
      <View className={navigationtBarHeight} >
        <View onClick={this.clickHome}>
          <Image src={statusS == 1 ? Homec : Home} className="icon" ></Image>
          <View className={statusS == 1 ? 'active' : ''}>首页</View>
        </View>
        <View onClick={this.clickShop}>
          <Image src={statusS == 2 ? Shopc : Shop} className="icon"></Image>
          <View className={statusS == 2 ? 'active' : ''}>商城</View>
        </View>
        <View onClick={this.scan}>
          <Image src={Saoc} className="icon centerIcon"></Image>
          <View className={statusS == 3 ? 'active' : ''}>扫码提货</View>
        </View>
        {this.state.cardCount > 0 ? (
          <View onClick={this.clickElectronicCard}>
            <Image src={statusS == 4 ? ElectronicCardDotC : ElectronicCardDot} className="icon"></Image>
            <View className={statusS == 4 ? 'active' : ''}>卡包</View>
          </View>
        ) :
          <View onClick={this.clickElectronicCard}>
            <Image src={statusS == 4 ? ElectronicCardC : ElectronicCard} className="icon"></Image>
            <View className={statusS == 4 ? 'active' : ''}>卡包</View>
          </View>
        }
        {/* <View onClick={this.clickDingzhic}>
          <Image src={statusS == 4 ? Dingzhic : Dingzhi} className="icon"></Image>
          <View className={statusS == 4 ? 'active' : ''}>定制</View>
        </View> */}
        {/* <View onClick={this.clickElectronicLp}>
          <Image src={statusS == 4 ? Dingzhic : Dingzhi} className="icon"></Image>
          <View className={statusS == 4 ? 'active' : ''}>测试</View>
        </View> */}
        <View onClick={this.clickUserc}>
          <Image src={statusS == 5 ? Userc : User} className="icon"></Image>
          <View className={statusS == 5 ? 'active' : ''}>我的</View>
        </View>
      </View>
    )
  }
}
